<template>
  <div class="container">
    <div class="top">
      <block v-if="self">
        <div class="avatar"></div>
        <div class="message">
          {{ message }}
          <div class="time">
            {{ time }}
          </div>
        </div>
        <img :src="avatar" class="avatar" mode="aspectFill">
      </block>
      <block v-else>
        <img :src="avatar" class="avatar" mode="aspectFill">
        <div class="message">
          {{ message }}
          <div class="time">
            {{ time }}
          </div>
        </div>
        <div class="avatar"></div>
      </block>
    </div>
  </div>
</template>

<script>
  /**
   * 讨论的列表item
   * @time 2018/04/15
   */
  export default {
    props: {
      avatar: {
        type: String,
        required: true,
      },
      message: {
        type: String,
        required: true,
      },
      time: {
        type: String,
        required: true,
      },
      // 是否是自己发的消息
      self: {
        type: Boolean,
        default: false,
      },
    },
  };
</script>

<style scoped lang="less">
  .container {
    position: relative;
    margin: 3px 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      flex-direction: row;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      .message {
        margin: 0 6px;
        flex: 1;
        padding: 8px;
        background-color: #ffffff;
        border-radius: 8px;
        font-size: 16px;
        .time {
          text-align: right;
          font-size: 12px;
          color: #888888;
        }
      }
    }
  }
</style>
